import type { RouteRecordRaw } from "vue-router";
/**
 * 路由meta对象参数说明
 * meta: {
 *      title:          菜单栏及 tagsView 栏、菜单搜索名称（国际化）
 *      hidden：        是否隐藏此路由
 *      icon：          菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
 * }
 */

/* 
  菜单权限控制目的让不同的用户看到不同的菜单
  逻辑：
  1.首先路由分为三个部分
  -所有用户都可以访问的是静态路由
  -根据用户登录返回的路由权限信息决定动态注册的路由
  -任意路由：这个路由是用户随意输入路径的时候要匹配的，最终重定向到404，这个路由在注册的时候，必须是注册在最后一个
  具体逻辑实现：
  -当请求回来数据后，在数据中会有一个对象保存该用户可以访问哪些动态路由的值 然后封装一个函数用来过滤用户有权限访问的动态组件，其中涉及到动态路由子组件深层次的问题我们使用函数递归进行解决。注意点：不能直接把请求回来的值直接传参，需要进行一个深拷贝，避免影响后面的用户.
  -第二步，我们将动态路由及任意路由添加到静态路由中，我们还需要把用户过滤出来的自己的动态路由，封装一个函数遍历每一项 通过路由器的api addRoute动态的添加注册到路由器，我们还需要根据注册的动态路由构造菜单遍历的时候需要的路由数组，让侧边栏动态生成菜单 this.menuRoutes=xxx 进行一个赋值操作
  -在用户退出登录的时候，其实我们应该要把路由器的路由重置成静态路由，避免下个用户进来还是上一次的路由把路由器当中所有的路由找到并删除，封装一个函数，在函数中判断只删除动态路由即可 把静态路由再重新添加注册到路由器当中

  2.按钮权限
  
*/

/**
 * 静态路由（默认路由）
 */
export const staticRoutes: Array<RouteRecordRaw> = [
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
    meta: {
      hidden: true,
    },
  },

  {
    path: "/404",
    name: "404",
    component: () => import("@/views/error/404.vue"),
    meta: {
      hidden: true,
    },
  },

  {
    path: "/",
    component: () => import("@/layout/index.vue"),
    redirect: "/home",
    children: [
      {
        path: "home",
        name: "Home",
        component: () => import("@/views/home/index.vue"),
        meta: {
          title: "首页",
          icon: "ele-HomeFilled",
        },
      },
    ],
  },
];

/**
 * 定义动态路由
 */
export const asyncRoutes: RouteRecordRaw[] = [
  {
    path: "/boluodi",
    component: () => import("@/layout/index.vue"),
    name: "boluodi",
    meta: {
      title: "测试",
      icon: "ele-Edit",
    },
    children: [
      {
        path: "test1",
        name: "test1",
        component: () => import("@/views/BOLUODI/TestOne/index.vue"),
        meta: {
          title: "测试1",
        },
      },
      {
        path: "test2",
        name: "test2",
        component: () => import("@/views/BOLUODI/TestTwo/index.vue"),
        meta: {
          title: "测试2",
        },
      },
    ],
  },
  /* 
    侧边栏的一级标题生成是遍历一级路由得来的,所以商品管理要配置为一级路由
  */
  {
    path: "/product",
    name: "Product",
    component: () => import("@/layout/index.vue"),
    meta: {
      title: "商品管理",
      icon: "ele-Briefcase",
    },
    children: [
      {
        path: "trademark/list",
        name: "Trademark",
        component: () => import("@/views/Product/Trademark/index.vue"),
        meta: {
          title: "品牌管理",
        },
      },
      {
        path: "attr/list",
        name: "Attr",
        component: () => import("@/views/Product/Attr/index.vue"),
        meta: {
          title: "平台属性管理",
        },
      },
      {
        path: "spu/list",
        name: "Spu",
        component: () => import("@/views/Product/Spu/index.vue"),
        meta: {
          title: "Spu管理",
        },
      },
      {
        path: "sku/list",
        name: "Sku",
        component: () => import("@/views/Product/Sku/index.vue"),
        meta: {
          title: "Sku管理",
        },
      },
    ],
  },
];

/* 
  定义任意路由
*/
export const atWillRoutes: RouteRecordRaw[] = [
  /* 匹配任意的路由 必须最后注册 */
  {
    path: "/:pathMatch(.*)",
    name: "Any",
    redirect: "/404",
    meta: {
      hidden: true,
    },
  },
];
